<template >
<div class="ballot_bg" :class="{'fixed':type_acted,noFixed:!type_acted}">
  <!-- <div class="ballot_bg_inner"> -->
    <div class="ballot_rule white_color sm_font" @click="act_rule = !act_rule">
      活动规则
    </div>
    <div class="ballot_title white_color">
      <div class="time white_bg">{{startTime | endTime2}} - {{endTime | endTime2}}</div>
      <div class="rule sm_font">
        每位用户当天可投三票，每张券仅可投一次
      </div>
    </div>
    <div class="ballot_content">
      <div class="sub_title md_m_font">
        参与投票优惠券
      </div>
      <div class="nav" :class="{actived: type_acted}">
        <div class="coupon_type" :class="{acted_icon:type_acted}" @click="choose_type">
          {{tit}}
        </div>
        <ul v-if="type_acted">
          <li v-for="(item,index) in typeList" :key="index" class="sm_font white_color" :class="{'checked_type': item.checked}" @click="typeQuery(item,index)">{{item.dictValue}}</li>
        </ul>
      </div>
      <div class="coupon_list"
        v-infinite-scroll="query"
        infinite-scroll-disabled="noloading"
        infinite-scroll-distance="10">
        <div style="width:90%;margin:0 auto 1rem;" v-for="(item, index) in coupons" :key="index">
          <ballot-coupon :coupon="item" @ballot="ballot"></ballot-coupon>
        </div>
        <div style="margin:auto;width: 28px;padding:0 0.5rem;" v-if="!noloading">
          <mt-spinner color="rgb(0, 0, 0)"></mt-spinner>
        </div>
        <div class="lastInfoMore white_color" v-if="noMoreData">没有更多</div>
      </div>
    </div>
    <div class="defined_modal1" v-if="type_acted"></div>
    <modal v-if="ballot_success">
      <div class="ballot_result md_l_font white_color">
        恭喜，投票成功
      </div>
      <div class="close_modal" @click="close_modal"></div>
    </modal>
    <ballot-rule v-if="act_rule" @close_modal="close_modal" :start-time="startTime" :end-time="endTime"></ballot-rule>
  <!-- </div> -->
</div>
</template>

<script>
import BallotCoupon from './coupon.vue'
import BallotRule from './rule.vue'
import getData2 from 'src/service/getData2.js'
import {queryBallot, ballot, ballotTime} from 'src/service/getData3.js'
import { mapGetters } from 'vuex'
import { Toast, Spinner} from 'mint-ui'

export default {
  name: 'ballot-activity',
  components: {
    BallotCoupon,
    BallotRule
  },
  data: () => ({
    type_acted: false,
    act_rule: false,
    ballot_success: false,
    typeList: [],
    coupons: [],
    startTime: '',
    endTime: '',
    noloading: true,
    currentPage: 0,
    noMoreData: false,
    noData: false,
    tit:'全部'
  }),
  computed: {
    ...mapGetters(['usrId'])
  },
  created() {
    // 投票活动起止时间
    this.queryBallotTime()
    // 投票类型
    this.getTypeList()
    // 投票电子券查询
    this.noloading = false
    // this.query()
  },
  methods: {
    async queryBallotTime() {
      try {
        let res = await ballotTime(this.$route.query.id)
        if (res.respCode !== '00'){
          throw new Error(res.errorInfo)
        } else {
          this.startTime = res.content.beginDate
          this.endTime = res.content.endDate
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    async getTypeList() {
      try {
        let res = await getData2.findType({})
        if (res.respCode !== '00'){
          throw new Error(res.errorInfo)
        } else {
          let list = res.content.info
          list.forEach(item => {
            list.checked = false
          })
          list.unshift({dictId: 0, dictValue: "全部", checked: true})
          this.typeList = list
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    choose_type() {
      this.type_acted = !this.type_acted
      if (this.type_acted) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'auto'
      }
    },
    async query(type) {
    	let types=type||0
      try {
        this.noData = false
        let currentPage = ++this.currentPage
        let perPage = 10
        let res = await queryBallot({currentPage, perPage, type:types, usrId: this.usrId, id: this.$route.query.id})
        if (res.respCode !== '00'){
          throw new Error(res.errorInfo)
        } else {
          let len = res.content.voteCouponList.length
          let total = res.content.total
          let totalPage = Math.ceil(total/perPage) // 页数
          this.coupons = this.coupons.concat(res.content.voteCouponList)
          if (this.currentPage < totalPage) {
            this.noloading = false
          } else {
            this.noloading = true
            this.noMoreData = true
          }
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    typeQuery(item,i) {
    	
    	console.log(item)
      this.currentPage = 0
      this.coupons = []
      this.query(item.dictId)
      this.typeList.forEach(item => {
        item.checked = false
      })
      item.checked = !item.checked
      this.type_acted = false
     this.tit=item.dictValue
    },
    async ballot(item) {
      let data = {
        usrId: this.usrId,
        mchtId: item.mchtId,
        couponId: item.couponId
      }
      try {
        let res = await ballot(data)
        if (res.respCode !== '00'){
          throw new Error(res.errorInfo)
        } else {
          this.ballot_success = true
        }
      } catch (e) {
        Toast({
          message: e.message,
          duration: 1000
        });
      }
    },
    close_modal() {
      if (this.act_rule) {
        this.act_rule = false
      } else if (this.ballot_success) {
        this.ballot_success = false
        this.currentPage = 0
        this.coupons = []
        this.query()
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    window.document.body.style.background = 'linear-gradient(to right top, #4d32a4, #844ae2)'
    next()
  },
  beforeRouteLeave(to, from, next){
    window.document.body.style.background = '#f5f5f5'

    next();
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;
.fixed{
	 overflow: hidden;
}
.noFixed{
	 overflow: auto;
}
.ballot_bg {
    margin-top: -48px;
    padding-top: 48px;
    height: 100%;
    width: $width;
    position: relative;
    z-index: 0;
    background-image: url("../../../images/ballot_bg_02.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 0 48px;
    .time {
      color: #5c32c0;
      font-size: 0.8rem;
      background-image: url("../../../images/ballot_title_time.png");
      background-repeat: no-repeat;
      background-position: 0 center;
      padding-left: 9%;
      background-size: 6%;
    }
}
.ballot_rule {
    background-image: url("../../../images/ballot_bg_03.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center 0;
    width: 2.2rem;
    text-align: center;
    padding: 0.2rem 0.3rem 0.56rem;
    box-sizing: content-box;
    position: absolute;
    top: 48px;
    right: 1rem;
}
.ballot_title {
    width: 52%;
    padding-top: 10rem;
    margin-left: 5%;
    margin-bottom: 2rem;
    background-image: url("../../../images/ballot_title.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 4rem;
    .time {
        line-height: 1.6rem;
        width: 96%;
        border-radius: 2rem;
        text-align: center;
        background-position: 6% center;
        background-size: 7%;
        background-image: url("../../../images/ballot_title_time.png");
        background-repeat: no-repeat;
        padding-left: 10%;
        margin: 0.5rem 0;
    }
    .rule {
        width: 96%;
    }
}
.ballot_content {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-height: 18rem;
    .coupon_list {
        width:100%;
        padding-top: 15%;
    }
    .sub_title {
        font-weight: bold;
        padding: 1.4rem 0 0.6rem 1.4rem;
        color: #fff697;
        background-image: url("../../../images/ballot_bg_04.png");
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        z-index: 2;
        left: 5%;
        top: -0.8rem;
    }
    .nav {
        width: 90%;
        padding: 0 5% 0.6rem;
        box-sizing: content-box;
        position: absolute;
        z-index: 3;
        &.actived {
          background: linear-gradient(to left, #3577fd, #af34ee);
          clip-path: polygon(76% 0, 100% 0, 100% 100%, 0 100%, 0 25%, 76% 25%);
        }
        .coupon_type {
            &.acted_icon {
              background-image: url("../../../images/up.png");
            }
            width: $width;
            float: right;
            margin-top: .8rem;
            margin-bottom: 1.6rem;
            padding-right: .9rem;
            background-image: url("../../../images/down.png");
            background-repeat: no-repeat;
            background-size: 0.8rem auto;
            background-position: right center;
            text-align: right;
        }
        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
    ul {
        width: $width;
        li {
            width: 23.5%;
            margin: 0.2rem 1%;
            float: left;
            text-align: center;
            padding: 0.5rem;
            background-color: rgba(255,255,255, 0.1);
            &:nth-child(1) {
                margin-left: 0;
            }
            &:nth-child(4n) {
                margin-right: 0;
            }
            &:nth-child(4n+1) {
                margin-left: 0;
            }
            &.checked_type {
              background-color: rgba(255, 255, 255, 1);
              color: #582ec1;
            }
        }
    }
}
.defined_modal1 {
  position: fixed;
  top: 28rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
// .act_rule {
//   width: 90%;
//   margin: 40% auto 0;
//   position: relative;
//   .rule_hdr {
//     width: 90%;
//     margin: auto;
//     height: 5rem;
//     background-image: url("../../../images/ballot_modal_hd.png");
//     background-position: 50% top;
//     background-repeat: no-repeat;
//     position: relative;
//     // margin-bottom: -0.7rem;
//     z-index: -1;
//   }
//   .rule_hdr_bg {
//     width: $width;
//     position: absolute;
//     background-repeat: no-repeat;
//     top: 0;
//   }
//   .rule_hdr_01 {
//     height: 4.8rem;
//     background-image: url("../../../images/ballot_modal_hd_02.png");
//     background-position: 50% top;
//     background-size: auto 100%;
//     text-align: center;
//     line-height: 6.4rem;
//     font-weight: bold;
//     letter-spacing: 0.05rem;
//   }
//   .rule_hdr_02 {
//     background-image: url("../../../images/ballot_modal_bg.png");
//     background-size: 100%;
//     bottom: 0;
//   }
//   .rule_cont {
//     width: 90%;
//     padding: 0.8rem;
//     margin: auto;
//     background-color: #582ec1;
//     border-radius: 3px;
//     .rule_main {
//       width:100%;
//       padding: 1.2rem;
//       margin: auto;
//       border-radius: 3px;
//       background-color: #fff;
//       li {
//         padding-top: 0.5rem;
//         padding-bottom: 0.5rem;
//         border-bottom: 1px dotted #ccc;
//         &:last-child {
//           border-bottom: none;
//         }
//       }
//     }
//   }
// }
.ballot_result {
  width: 90%;
  margin: auto;
  height: 16rem;
  line-height: 18rem;
  background-image: url("../../../images/ballot_success.png");
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin-top: 40%;
  text-align: center;
}
.close_modal {
  width: 16px;
  height: 16px;
  background-image: url("../../../images/close.png");
  background-repeat: no-repeat;
  margin: auto;
  background-size: cover;
  margin-top: 1.5rem;
}
</style>
